<template>
  <div
    style="
      display: flex;
      padding: 1vh 1vw;
      margin-left: 20vw;
      width: 78vw;
      height: 98vh;
    "
  >
  <div class="markdown-box" id="textBox">
    {{ text }}

  </div>
  </div>
</template>

<script>
// import { marked } from "marked";

export default {
  data() {
    return {
      markdownContent: "# Hello, Vue with Marked!",
      text: "markdown test",
    };
  },
  methods: {},
  mounted() {
//     let text = `# 你好 这是大标题

// 这里是应用的一些介绍文字。你可以在这里添加任何你想要展示给用户的信息。

// ## 特性

// - 特性 1
// - 特性 2
// - 特性 3

// ## 使用说明

// 这里可以写一些关于如何使用这个应用的指南或帮助文档。

// ### 表格示例

// | 列1      | 列2      | 列3      |
// | -------- | -------- | -------- |
// | 数据 1   | 数据 2   | 数据 3   |
// | 数据 4   | 数据 5   | 数据 6   |`
//     let html = marked(text);
//     document.getElementById("textBox").innerHTML = html
    // this.text = marked(this.markdownContent);
  },
};
</script>

<style>
/* 为markdown渲染出的表格添加样式 */
.markdown-box table {
  width: 100%;
  border-collapse: collapse; /* 让边框合并 */
}

.markdown-box table, 
.markdown-box th, 
.markdown-box td {
  border: 1px solid black; /* 给表格、表头和单元格添加边框 */
}

.markdown-box th, 
.markdown-box td {
  padding: 8px;
  text-align: left;
}


</style>